<template>
  <div class="history">
    <div class="entering_title">
      <h3>发展历程</h3>
      <p>DEVELOPMENT HISTORY</p>
    </div>
    <div class="entering_nav block container">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          color='#4276EF'
          placement='top'
          :class="activity.bold?'line':''"
          :timestamp="activity.timestamp">
          <div class="bold_year" v-if="activity.bold">
            <div class="year-line"></div>
            <span>{{activity.banner}}</span>
            <img :src="pItem" alt="" v-for="(pItem,pIndex) in activity.img" :key="pIndex">
          </div>
            <p v-for="(cItem,cIndex) in activity.content" :key="cIndex">{{cItem}}</p>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import {getHistoryData} from 'api/api'
export default {
  data() {
    return {
      activities: []
    }
  },
  mounted () {
    getHistoryData()
    .then((res)=>{
      this.activities = []
      console.log(res)
      this.activities = res
    })
  }
}
</script>

<style lang="scss" scoped>
</style>

<style lang="scss">
.line{
  position: relative;
  .el-timeline-item__timestamp{
    font-size: 60px;
    font-weight: bolder;
    color: #333333;
    position: absolute;
    left: 10px;
    top: -25px;
  }
  .el-timeline-item__content{
    padding: 60px 0 0 90px;
    .bold_year{
      img{
        width: 270px;
        margin-right: 20px;
        margin-bottom: 35px;
      }
      .year-line{
        width: 650px;
        height: 1px;
        border-top: 2px dashed #333333;
        position: absolute; 
        left: 170px;
        top: 5px;
      }
      span{
        position: absolute;
        left: 830px;
        top: -5px;
        font-size: 21px;
        color: #333333;
      }
    }
  }
}
.el-timeline-item__timestamp{
  float: left;
}
.el-timeline-item__content{
  padding-left: 90px;
  p{
    width: 850px;
    font-size: 13px;
    font-weight: 400;
    color: #666;
    line-height: 25px;
  }
}
</style>
